<template>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item>系统配置</el-breadcrumb-item>
    <el-breadcrumb-item>站点信息</el-breadcrumb-item>
  </el-breadcrumb>
    <el-card class="box-card">
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="标题"  prop="web_site_title">
          <el-input v-model="form.web_site_title"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="web_site_keywords">
          <el-input v-model="form.web_site_keywords" ></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="web_site_logo">
          <!-- action: 图片上传的API接口地址 -->
          <el-upload
            class="avatar-uploader"
            :action="adminUpload"
            :show-file-list="false"
            :headers="headerObj"
            :on-success="handleSuccess">
            <img v-if="site_logo" :src="site_logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述" prop="web_site_description">
          <el-input type="textarea" v-model="form.web_site_description"></el-input>
        </el-form-item>
        <el-form-item label="版权信息" prop="web_site_copyright">
          <el-input v-model="form.web_site_copyright"></el-input>
        </el-form-item>
        <el-form-item label="icp" prop="web_site_icp">
          <el-input v-model="form.web_site_icp"></el-input>
        </el-form-item>
        <el-form-item label="系统代码" prop="web_code_statistics">
          <el-input type="textarea" v-model="form.web_code_statistics"></el-input>
        </el-form-item>
        <el-form-item label="状态"  prop="web_site_status">
          <template>
            <el-radio label="0" v-model="form.web_site_status">禁用</el-radio>
            <el-radio label="1" v-model="form.web_site_status">启用</el-radio>
          </template>
        </el-form-item>
        <div>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="saveSite">保存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  data () {
    return {
      form: {
        web_site_title: '',
        web_site_logo: '',
        web_site_keywords: '',
        web_site_description: '',
        web_site_copyright: '',
        web_site_icp: '',
        web_code_statistics: '',
        web_site_status: ''
      },
      // 图片显示路径
      site_logo: '',
      // 上传地址
      adminUpload: this.$uploadImg + this.GLOBAL.adminUpload,
      // 图片上传组件的请求对象
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      }
    }
  },
  created() {
    this.config()
  },
  methods: {
    async config () {
      const { data: res } = await this.$http.get(this.GLOBAL.config)
      if (res.status !== 200) return this.$message.info(res.info)
      this.form.web_site_title = res.data.config.web_site_title
      this.form.web_site_logo = res.data.config.web_site_logo
      this.form.web_site_keywords = res.data.config.web_site_keywords
      this.form.web_site_description = res.data.config.web_site_description
      this.form.web_site_copyright = res.data.config.web_site_copyright
      this.form.web_site_icp = res.data.config.web_site_icp
      this.form.web_site_status = res.data.config.web_site_status
      this.form.web_code_statistics = res.data.config.web_code_statistics
      this.site_logo = this.$imgUrl + res.data.config.web_site_logo
    },
    async saveSite () {
      const { data: res } = await this.$http.post(this.GLOBAL.saveConfig, this.form)
      if (res.status !== 200) return this.$message.error(res.info)
      this.$message.success(res.info)
    },
    cancel () {
      this.config()
    },
    // 监听图片上传成功事件
    handleSuccess(response) {
      // 1.获取上传路径
      this.form.web_site_logo = response.data.tmp_path
      this.site_logo = this.$imgUrl + this.form.web_site_logo
      console.log(this.form.site_logo)
    }
  }
}
</script>

<style scoped>
.el-form{
  margin: 0 15%!important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
